<template>
    <div class="report_detail_list">
        <Table :loading="loading" :columns="columns" :data="tableInfo.list" border stripe></Table>
    </div>
</template>

<script>
import util from '@/libs/util'
export default {
  props: {
    loading: Boolean,
    tableInfo: Object // 表格信息
  },
  data () {
    return {
      columns: [
        {
          title: '设备信息',
          key: 'devInfo',
          sortable: true,
          minWidth: 40,
          render: (h, params) => {
            let domList = [h('div', params.row.devInfo.name), h('div', `SN: ${params.row.devInfo.sn || '-'}`)]
            params.row.devInfo.tags &&
                            params.row.devInfo.tags.forEach(item => {
                              domList.push(
                                h(
                                  'Tag',
                                  {
                                    props: {
                                      color: '#05bac5'
                                    }
                                  },
                                  item
                                )
                              )
                            })
            return h('div', { style: { padding: '6px 0' } }, domList)
          }
        },
        {
          title: '房源地址',
          key: 'addr',
          sortable: true,
          minWidth: 50,
          render: (h, params) => {
            return h('div', util.concatLocation(params.row))
          }
        },
        {
          title: '房间号',
          key: 'room_name',
          align: 'center',
          sortable: true
        },
        {
          title: '设备状态',
          key: 'state',
          align: 'center',
          sortable: true,
          render: (h, params) => {
            let text = ''
            switch (params.row.state) {
              case 1:
                text = '待交付'
                break
              case 2:
                text = '已交付已绑定'
                break
              case 3:
                text = '已下线被替换'
                break
              case 4:
                text = '已下线被退货'
                break
              case 5:
                text = '已交付被丢失'
                break
              case 6:
                text = '已交付被拆回'
                break
              case 7:
                text = '已交付被解绑'
                break
            }
            return h('div', [h('div', text)])
          }
        },
        {
          title: '保修信息',
          align: 'center',
          key: 'guarantee',
          sortable: true,
          render: (h, params) => {
            return h('div', [
              h(
                'div',
                {
                  style: {
                    color: params.row.guarantee.state === '已过保' ? '#d00' : '#05bac5'
                  }
                },
                params.row.guarantee.state
              ),
              h('div', params.row.guarantee.time || '-')
            ])
          }
        },
        {
          title: '交付时间',
          key: 'bill_time',
          align: 'center',
          sortable: true,
          render: (h, params) => {
            let date = params.row.bill_time ? new Date(params.row.bill_time).Format('YYYY-MM-DD HH:mm') : '-'
            return h('div', [h('div', date)])
          }
        }
        // {
        //     title: '操作',
        //     key: 'set',
        //     align: 'center',
        //     minWidth: 10,
        //     render: (h, params) => {
        //         return h('div', [
        //             h(
        //                 'Button',
        //                 {
        //                     props: {
        //                         type: 'ghost',
        //                         size: 'small'
        //                     },
        //                     style: {
        //                         marginRight: '2px'
        //                     },
        //                     on: {
        //                         click: () => {
        //                             this.$emit('goDetail', params.row.devInfo.sn, params.row.devInfo.id);
        //                         }
        //                     }
        //                 },
        //                 '详情'
        //             )
        //         ]);
        //     }
        // }
      ]
    }
  }
}
</script>

<style lang="less">
.report_detail_list .ivu-table-cell {
    padding: 0 8px;
}
</style>
